<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>数组模拟Stack和Queue的操作</h3>
		<ul>
			<li>使用push和pop模拟队列操作</li>
			<li>使用shift和unshift函数对数组头部进行操作</li>
			<li>数组中的元素与放入/取出数组的元素之间是怎样的关系（对于引用类型）</li>
			<li><button onclick="funcTest1()">运行例子</button></li>
		</ul>
		<script>
			function funcTest1(){
				var arr = new Array();
				arr.push(1);
				arr.push(2);
				arr.push(3);
				arr.push(4);
				console.log(arr.pop());			// 4
				console.log(arr.pop());			// 3
				console.log(arr.pop());			// 2
				console.log(arr.pop());			// 1
				
				arr = [2,3,4];
				arr.unshift(1);
				console.log(arr.shift());  		// 1
				
				arr = new Array();
				var a = {id:1001,name:"jerry"};
				var b = {id:1002,name:"jam"};
				arr.unshift(a);
				arr.unshift(b);
				b.id = 2002;
				var b1 = arr.shift();
				console.log(b1.id);				// 2002
			}
		</script>
	
		<h3>修改数组元素</h3>
		<ul>
			<li>slice和splice函数，在对数组进行裁剪时非常有用</li>
			<li>indexOf和lastIndexOf函数用于子串查找</li>
			<li><button onclick="funcTest2()">运行例子</button></li>
		</ul>
		<script>
			function funcTest2(){
				var arr = [1,2,3,4,5];
				var arr1 = arr.slice(2, 4);   	// 将索引从2到4的元素删除
				console.log(arr.length);		// slice不会修改数组本身
				console.log(arr1.length);		// slice函数的返回值代表数组裁剪后剩余的元素
				
				var arr2 = arr.splice(2, 4);	// 将索引从2到4的元素删除
				console.log(arr.length);		// splice会直接在原始数组上进行裁剪
				console.log(arr2.length);		// splice返回被裁剪的元素
			}
		</script>
	
		<h3>数组排序</h3>
		<ul>
			<li>sort函数将会调用String()函数把元素转成字符串后再排序</li>
			<li>自定义比较函数，从而使sort函数可以正常排序</li>
			<li><button onclick="funcTest3()">运行例子</button></li>
		</ul>
		<script>
			function compareNumber(num1, num2){
				return num1 - num2;
			}
			function funcTest3(){
				var arr = [1, 10, 3, 5, 2, 20];
				arr.sort();
				var length = arr.length;
				for(var i=0;i<length;i++){			// 效率上比i<arr.length要好一点
					console.log(arr[i]);			
				}
				console.log("正确的排序结果：")
				arr.sort(compareNumber);
				for(var i=0;i<length;i++){			
					console.log(arr[i]);			
				}
			}
		</script>
		
		<h3>数组遍历</h3>
		<ul>
			<li>forEach，注意元素操作函数可带参数：item, index, array</li>
			<li>every: 对数组中每个元素进行判断，若均返回true，则every函数返回true</li>
			<li>some: 对数组中每个元素进行判断，若任意一个返回true，则some函数返回true</li>
			<li>filter: 将所有满足条件的元素返回</li>
			<li>map: 对数组中每个元素分别执行操作，并将各元素操作结果返回</li>
			<li><button onclick="funcTest4()">运行例子</button></li>
		</ul>
		<script>
			function funcTest4(){
				var arr = [2,7,8,15,20];
				arr.forEach(function(item, index, array){
					console.log("forEach访问第" + index + "个元素：" + item);
				});
				
				var result = arr.every(function(item, index, array){
					return (item % 2 == 0);
				});
				console.log("every函数返回：" + result);
				
				result = arr.some(function(item, index, array){
					return (item % 2 == 0);
				});
				console.log("some函数返回：" + result);
				
				result = arr.filter(function(item, index, array){
					return (item % 2 == 0);
				});
				console.log("filter结果：");
				for(var i=0;i<result.length;i++){
					console.log(result[i]);
				}
				
				result = arr.map(function(item, index, array){
					return item*item;
				});
				console.log("map结果：");
				for(var i=0;i<result.length;i++){
					console.log(result[i]);
				}
			}
		</script>
	</body>
</html>
